<template>
  <div>
    <van-nav-bar title="商品订单" left-arrow />
    <van-search shape="round" show-action placeholder="请输入搜索关键词">
      <template #action>
        <div style="color: #003399">搜索</div>
      </template>
    </van-search>
    <van-tabs v-model="num">
      <van-tab title="全部">
        <ShipmentText :allArr="allArr"/>
      </van-tab>
      <van-tab title="待发货">
        <ShipmentText :allArr="allArr1" />
      </van-tab>
      <van-tab title="待收货">
         <ShipmentText :allArr="allArr2" />
      </van-tab>
      <van-tab title="待评价">
        <ShipmentText :allArr="allArr3" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { OallList, OallList1,OallList2,OallList3 } from "../request/api";
import ShipmentText from "../components/ShipmentText";
export default {
  data() {
    return {
      num: 0,
      allArr: [],
      allArr1: [],
      allArr2: [],
      allArr3: [],
    };
  },
  created() {
    // let token = localStorage.getItem("token");
    //全部订单
    OallList({
      // "x-auth-token": token,
    }).then((res) => {
      this.allArr = res.data.records;
      this.serialNo = res.data.records[0].serialNo;
      // console.log(this.serialNo);
    });
    //待发货
    OallList1({
      // "x-auth-token": token,
    }).then((res) => {
      console.log(res.data);
      this.allArr1 = res.data.records;
    });
    //待收货
    OallList2({
      // "x-auth-token": token,
    }).then((res) => {
      console.log(res.data.records);
      this.allArr2 = res.data.records;
    });
    //待评价
    OallList3({
      // "x-auth-token": token,
    }).then((res) => {
      // console.log(res.data.records);
      this.allArr3 = res.data.records;
    });
   
  },
  components: {
    ShipmentText,
  },
};
</script>
 
<style lang = "less" scoped>
/deep/ .van-nav-bar__content {
  background: #003399;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
}
/deep/.van-tabs {
  .van-tabs__line {
    background-color: #fad157;
  }
  .van-tab--active {
    color: #003399;
  }

  .van-tab::before {
    content: "";
    width: 1px;
    height: 20px;
    background-color: #e5e5e5;
    position: absolute;
    right: 0px;
    top: 12px;
  }
  .van-tab {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;

    &:nth-of-type(4) {
      &::before {
        background-color: transparent;
      }
    }
  }
}
</style>